<template>
  <el-dialog
    append-to-body
    :title="title"
    :visible.sync="dialogVisible"
    width="1000px"
    @close="close"
  >
    <div>
      <el-input
        v-model.trim="blood_id"
        class="wd300 mr12"
        clearable
        placeholder="血袋号"
        @input="getOne"
      >
        <template slot="prepend">血袋号：</template>
      </el-input>
      <el-button type="primary" @click="getOne">搜索</el-button>
      <div class="h12"></div>
    </div>
    <el-empty
      v-if="!form.id"
      description="暂无任何数据"
      style="padding-top: 200px"
    />
    <div v-else>
      <div class="h12"></div>
      <fieldset>
        <legend>血液报废</legend>
        <div class="h12"></div>
        <el-form
          ref="form"
          label-width="100px"
          :model="postData"
          :rules="rules"
        >
          <el-form-item label="出库原因" prop="blood_outbound_reason_ids">
            <el-cascader
              v-model="postData.blood_outbound_reason_ids"
              :options="bloodOutboundReasons"
              :props="props"
            />
          </el-form-item>
          <el-form-item label="出库备注">
            <el-input
              v-model="postData.descri"
              placeholder="出库备注"
              rows="4"
              type="textarea"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              class="ml12"
              icon="el-icon-document"
              type="primary"
              @click="handleSubmit"
            >
              提交
            </el-button>
          </el-form-item>
        </el-form>
      </fieldset>
      <div class="h24"></div>
      <fieldset v-if="form.id">
        <legend>血液信息</legend>
        <blood :blood="form" />
      </fieldset>
    </div>
  </el-dialog>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { deepClone } from '@/utils'
  import Blood from './Blood'
  import { getOne } from '@/api/blood'
  export default {
    components: {
      Blood,
    },
    data() {
      return {
        blood_id: '',
        dialogVisible: false,
        title: '血液报废',
        form: {},
        postData: {
          blood_id: '',
          blood_outbound_reason_ids: '',
          descri: '',
        },
        props: { label: 'name', value: 'id' },
        rules: {
          blood_outbound_reason_ids: [
            { required: true, trigger: 'blur', message: '出库原因必须' },
          ],
        },
      }
    },
    computed: {
      ...mapGetters(['products', 'bloodOutboundReasons']),
    },
    methods: {
      setBlood(row) {
        this.form = deepClone(row)
      },
      close() {
        this.blood_id = ''
        this.form = {}
        this.dialogVisible = false
      },
      show() {
        this.dialogVisible = true
      },
      handleSubmit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.dialogVisible = false
            this.postData.blood_id = this.blood_id
            this.$emit('submit', this.postData)
          } else {
            return false
          }
        })
      },
      async getOne() {
        if (this.blood_id) {
          const { data } = await getOne(this.blood_id)
          this.form = data
        }
      },
    },
  }
</script>

<style lang="scss" scoped></style>
